<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Работа с типами региона</title>
</head>
<body>

<form id="createRegionTypeForm">
    <h1 id="regionTypeSuccess"></h1>
    <input type="text" id="regionType" placeholder="Тип региона" required>
    <button type="submit">Создать тип региона</button>
</form>

<form id="getRegionTypeForm">
    <h1 id="getRegionTypeSuccess"></h1>
    <input type="text" id="getTypeId" placeholder="Идентификатор типа региона" required>
    <button type="submit">Получить тип региона</button>
</form>

<div id="regionTypeInfo">
    <h2>Информация о типе региона:</h2>
    <p id="regionTypeId"></p>
    <p id="regionTypeName"></p>
</div>

<form id="editRegionTypeForm">
    <h1 id="editRegionTypeSuccess"></h1>
    <input type="text" id="editTypeId" placeholder="Идентификатор типа региона" required>
    <input type="text" id="editType" placeholder="Новый тип региона" required>
    <button type="submit">Редактировать тип региона</button>
</form>

<form id="deleteRegionTypeForm">
    <h1 id="deleteRegionTypeSuccess"></h1>
    <input type="text" id="deleteTypeId" placeholder="Идентификатор типа региона" required>
    <button type="submit">Удалить тип региона</button>
</form>


<script>
    const createRegionTypeForm = document.getElementById('createRegionTypeForm');
    const getRegionTypeForm = document.getElementById('getRegionTypeForm');
    const editRegionTypeForm = document.getElementById('editRegionTypeForm');
    const deleteRegionTypeForm = document.getElementById('deleteRegionTypeForm');

    createRegionTypeForm.addEventListener('submit', function (event) {
        event.preventDefault();
        const type = document.getElementById('regionType').value;
        const data = JSON.stringify({type: type});
        fetch('/region/types', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: data
        })
            .then(response => {
                if (response.status === 201) {
                    document.getElementById("regionTypeSuccess").innerText = "Тип региона успешно создан!";
                    return response.json();
                } else {
                    document.getElementById("regionTypeSuccess").innerText = "Ошибка при создании типа региона!";
                }
            })
            .catch((error) => {
                console.error('Ошибка:', error);
                document.getElementById("regionTypeSuccess").innerText = "Ошибка при создании типа региона!";
            });
    });

    document.getElementById('getRegionTypeForm').addEventListener('submit', function (event) {
        event.preventDefault();
        const typeId = document.getElementById('getTypeId').value;
        fetch(`/region/types/${typeId}`)
            .then(response => {
                if (response.status === 200) {
                    return response.json();
                } else {
                    throw new Error('Ошибка при получении типа региона!');
                }
            })
            .then(data => {
                document.getElementById("regionTypeId").innerText = `Идентификатор: ${data.id}`;
                document.getElementById("regionTypeName").innerText = `Тип: ${data.type}`;
                document.getElementById("getRegionTypeSuccess").innerText = "Тип региона успешно получен!";
            })
            .catch((error) => {
                console.error('Ошибка:', error);
                document.getElementById("getRegionTypeSuccess").innerText = "Ошибка при получении типа региона!";
            });
    });

    editRegionTypeForm.addEventListener('submit', function (event) {
        event.preventDefault();
        const typeId = document.getElementById('editTypeId').value;
        const type = document.getElementById('editType').value;
        const data = JSON.stringify({type: type});
        fetch(`/region/types/${typeId}`, {
            method: 'PUT',
            headers: {'Content-Type': 'application/json'},
            body: data
        })
            .then(response => {
                if (response.status === 200) {
                    document.getElementById("editRegionTypeSuccess").innerText = "Тип региона успешно отредактирован!";
                    return response.json();
                } else {
                    document.getElementById("editRegionTypeSuccess").innerText = "Ошибка при редактировании типа региона!";
                }
            })
            .catch((error) => {
                console.error('Ошибка:', error);
                document.getElementById("editRegionTypeSuccess").innerText = "Ошибка при редактировании типа региона!";
            });
    });

    deleteRegionTypeForm.addEventListener('submit', function (event) {
        event.preventDefault();
        const typeId = document.getElementById('deleteTypeId').value;
        fetch(`/region/types/${typeId}`, {
            method: 'DELETE',
            headers: {'Content-Type': 'application/json'}
        })
            .then(response => {
                if (response.status === 200) {
                    document.getElementById("deleteRegionTypeSuccess").innerText = "Тип региона успешно удален!";
                } else {
                    document.getElementById("deleteRegionTypeSuccess").innerText = "Ошибка при удалении типа региона!";
                }
            })
            .catch((error) => {
                console.error('Ошибка:', error);
                document.getElementById("deleteRegionTypeSuccess").innerText = "Ошибка при удалении типа региона!";
            });
    });
</script>

</body>
</html>